---
title: Pengesahan
description: Mengesahkan pengguna anda
---

# Pengesahan

## Menyediakan akses yang disahkan kepada aplikasi anda

Anda boleh secara opsional menguatkuasakan bahawa pengguna menandatangani mesej dengan dompet mereka semasa proses sambungan, membuktikan bahawa mereka memiliki akaun yang disambungkan dan membolehkan anda membuat sesi pengguna yang disahkan dengan akses istimewa ke aplikasi anda.

Meskipun mungkin untuk [mengintegrasikan dengan backend dan format pesan kustom,](/docs/custom-authentication) RainbowKit menyediakan dukungan kelas utama untuk [Sign-In dengan Ethereum](https://login.xyz) dan [NextAuth](https://next-auth.js.org).

### Sediakan Sign-In dengan Ethereum dan NextAuth

#### Pasang

Pasang pakej `@rainbow-me/rainbowkit-siwe-next-auth`.

```bash
npm install @rainbow-me/rainbowkit-siwe-next-auth
```

#### Sediakan pengeluar

Dalam komponen `App` anda, import `RainbowKitSiweNextAuthProvider`.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
```

Bungkus `RainbowKitProvider` dengan `RainbowKitSiweNextAuthProvider`, pastikan ia bersarang di dalam `SessionProvider` NextAuth agar ia mempunyai akses kepada sesi.

```tsx
import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>;
  );
}
```

Dengan `RainbowKitSiweNextAuthProvider` di tempatnya, pengguna anda kini akan diminta untuk mengesahkan dengan menandatangani mesej sebaik sahaja mereka telah menyambungkan dompet mereka.

#### Sesuaikan opsi mesej SIWE

Anda boleh menyesuaikan [pilihan mesej SIWE](https://viem.sh/docs/siwe/utilities/createSiweMessage#parameters) dengan menyerahkan fungsi kepada prop `getSiweMessageOptions` pada `RainbowKitSiweNextAuthProvider`.

Fungsi ini akan dipanggil setiap kali mesej baru dicipta. Pilihan yang dikembalikan daripada fungsi ini akan digabungkan dengan tetapan lalai.

```tsx
import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;
```

#### Akses pelayan sesi sebelah

Anda boleh mengakses token sesi dengan fungsi `getToken` NextAuth yang diimport dari `next-auth/jwt`. Sekiranya pengguna telah berjaya mengesahkan, sifat `sub` token sesi ("subjek" token, iaitu pengguna) akan menjadi alamat pengguna.

Anda juga boleh memindahkan objek sesi yang telah diselesaikan dari pelayan melalui `getServerSideProps` supaya NextAuth tidak perlu menyelesaikannya lagi pada pelanggan.

Sebagai contoh:

```tsx
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}
```

Untuk maklumat lanjut mengenai pengurusan sesi, anda boleh merujuk kepada dokumentasi berikut:

- [Panduan pengesahan Next.js](https://nextjs.org/docs/pages/guides/authentication)
- [Dokumentasi NextAuth](https://next-auth.js.org)
